<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户管理页面</title>
    <!-- bootstrap样式 -->
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <script th:src="@{/js/common.js}"></script>
</head>
<body>


<div class="container">
    <div id="wu-toolbar">
        <h2>客户列表</h2>

        <div class="wu-toolbar-search">
            <form class="navbar-form navbar-left" role="search" action="/admin/account/findByName">
                <div class="form-group">
                    客户名称:<input type="text" class="form-control" placeholder="Search" name="accountName">

                </div>


                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div>
        <table class="table table-bordered table-hover ">
            <thead>
            <tr class="success">
                <th>客户名称</th>
                <th>密码</th>
                <th>手机号</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="success" th:each="accountList : ${accountList}">
                <td th:text="${accountList.name}">张三</td>
                <td th:text="${accountList.password}">123123</td>
                <td th:text="${accountList.mobile}">18563231132</td>
                <td th:if="${accountList.status==0}">
                    激活
                </td>
                <td th:if="${accountList.status!=0}">
                    冻结
                </td>

                <td>
                    <button type="button" class="btn btn-link" data-toggle="modal" data-target="#edit-modal">编辑</button>
                    <button type="button" class="btn btn-link del-modal" data-toggle="modal" data-target="#del-modal">
                        <a th:href="@{/admin/account/deleteaccount(id=${accountList.id})}">删除</a>
                    </button>
                </td>
            </tr>
           </tbody>
        </table>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary add-btn " data-toggle="modal" data-target="#add-modal">添加</button>


    </div>

<!--        <div class="page">-->
<!--            <div>-->
<!--                当前第 [[${pageInfo.pageNum}]] 页 共 [[${pageInfo.pages}]] 页 一共 [[${pageInfo.total}]] 条记录-->
<!--            </div>-->
<!--            <span class="page-btn active" th:if="${pageInfo.hasPreviousPage}">-->
<!--      <a th:href="'/admin/account/accountUi?pageNum==1'">首页</a>-->
<!--   </span>-->
<!--            <span class="page-bth" th:if="${pageInfo.hasPreviousPage}">-->
<!--      <a th:href="'/admin/account/accountUi?pageNum='+${pageInfo.prePage}"><</a>-->
<!--   </span>-->
<!--            <span class="page-bth" th:each="nav:${pageInfo.navigatepageNums}" th:if="${nav != pageInfo.pageNum}">-->
<!--      <a th:href="'/admin/account/accountUi?pageNum='+${nav}" th:text="${nav}" ></a>-->
<!--   </span>-->
<!--            <span class="page-bth" th:if="${pageInfo.hasNextPage}">-->
<!--      <a th:href="'/admin/account/accountUi?pageNum='+${pageInfo.nextPage}">></a>-->
<!--   </span>-->
<!--            <span class="page-bth">-->
<!--      <a th:href="'/admin/account/accountUi?pageNum='+${pageInfo.pages}">尾页</a>-->
<!--   </span>-->
<!--        </div>-->
        <nav aria-label="Page navigation" class="fy-nav">
            <ul class="pagination pagination-lg">
                <li>当前第 [[${pageInfo.pageNum}]] 页 共 [[${pageInfo.pages}]] 页 一共 [[${pageInfo.total}]] 条记录</li>
                <li>
                    <a th:href="'/admin/account/accountUi?pageNum='+${pageInfo.prePage}" aria-label="Previous" >
                        <span aria-hidden="true"> &laquo;</span>
                    </a>
                </li>
                <li class="active"><a th:href="'/admin/account/accountUi?pageNum='+1">1</a></li>
                <li><a th:href="'/admin/account/accountUi?pageNum='+2">2</a></li>
                <li><a th:href="'/admin/account/accountUi?pageNum='+3">3</a></li>
                <li><a th:href="'/admin/account/accountUi?pageNum='+4">4</a></li>
                <li><a th:href="'/admin/account/accountUi?pageNum='+5">5</a></li>
                <li><a th:href="'/admin/account/accountUi?pageNum='+6">6</a></li>
                <li><a th:href="'/admin/account/accountUi?pageNum='+7">7</a></li>
                <li><a th:href="'/admin/account/accountUi?pageNum='+8">8</a></li>
                <li><a th:href="'/admin/account/accountUi?pageNum='+9">9</a></li>
                <li><a th:href="'/admin/account/accountUi?pageNum='+10">10</a></li>

                <li>
                    <a th:href="'/admin/account/accountUi?pageNum='+${pageInfo.nextPage}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>


<!--        <ul class="pagination pagination-lg">-->
<!--            <li class="text">当前第 [[${pageInfo.pageNum}]] 页 共 [[${pageInfo.pages}]] 页 一共 [[${pageInfo.total}]] 条记录 </li>-->
<!--            <li class="active" th:if="${pageInfo.hasPreviousPage}">-->
<!--             <a th:href="'/admin/account/accountUi?pageNum=1'">首页</a>-->
<!--            </li>-->
<!--            <li th:if="${pageInfo.hasPreviousPage}">-->
<!--                <a th:href="'/admin/account/accountUi?pageNum='+${pageInfo.prePage}" aria-label="Previous">-->
<!--                    <span aria-hidden="true">&laquo;</span>-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="active" th:each="nav:${pageInfo.navigatepageNums}" th:if="${nav != pageInfo.pageNum}">-->
<!--                <a  th:href="'/admin/account/accountUi?pageNum='+${nav}" th:text="${nav}">1</a></li>-->

<!--            <li  th:if="${pageInfo.hasNextPage}"><a th:href="'/admin/account/accountUi?pageNum'+${pageInfo.nextPage}"></a></li>-->


<!--            <li>-->
<!--                <a th:href="'/admin/account/accountUi?pageNum='+${pageInfo.pages}">尾页</a>-->
<!--            </li>-->
<!--        </ul>-->
    </nav>

    <!-- Modal 添加客户 -->
    <div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-labelledby="addmyModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addmyModalLabel">添加客户操作</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="add-form"
                          action="/admin/account/addaccount">

                        <div class="form-group">

                        </div>
                        <div class="form-group">
                            <label for="add-name" class="col-sm-2 control-label">用户名：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" id="add-name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="add-price" class="col-sm-2 control-label">密码：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="password" id="add-price">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="add-mobile" class="col-sm-2 control-label">手机号码：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="mobile" id="add-mobile">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">状态：</label>
                            <select class="form-control" name="0">
                                <option >冻结</option>
                                <option >激活</option>

                            </select>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" form="add-form">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal 编辑学生 -->
    <div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="editmyModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editmyModalLabel">编辑客户信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="edit-form"
                          action="/admin/account/editaccount">
                        <div class="form-group">

                        </div>
                        <div class="form-group">
                            <label for="edit-name" class="col-sm-2 control-label">用户名：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" id="edit-name" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="edit-price" class="col-sm-2 control-label">密码：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="password" id="edit-price">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="edit-mobile" class="col-sm-2 control-label">手机号码：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="mobile" id="edit-mobile">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">状态：</label>
                            <select class="form-control" name="1">
                                <option >冻结</option>
                                <option >激活</option>

                            </select>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" form="edit-form">保存</button>
                </div>
            </div>
        </div>
    </div>


</div>
<script>
    $(function () {
        $("li").click(function () {
            $(this).addClass("active")
            $(this).siblings().removeClass("active")
        })
    })
</script>
</body>
</html>